<template>
  <div>
    <div class="screen-search layout-container out-border">
      <div class="screen-header d-flex justify-content-between">
        <div class="screen-l">
          <i class="el-icon-search"></i>
          <span class="txt">筛选搜索</span>
        </div>
        <div class="screen-r">
          <el-button type="primary" size="small" @click.prevent="handleBrandSearch">查询结果</el-button>
        </div>
      </div>
      <div class="submit-container">
        <el-form ref="screenFormInfo" :model="brandFormInfo" class="form-conten t d-flex flex-wrap">
          <el-form-item label="输入名称:" label-width="120px" style="margin: 0">
            <el-input v-model="brandFormInfo.keyword" placeholder="品牌名称/关键字" style="margin-left: 0 !important"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="dataList out-border d-flex justify-content-between layout-top">
      <div class="screen-l">
        <i class="el-icon-tickets"></i>
        <span class="txt">数据列表</span>
      </div>
      <el-button size="mini" @click="() => this.$router.push('/pms/addProduct')">添加</el-button>
    </div>
    <div class="layout-top">
      <el-table :data="brandList" border style="width: 100%">
        <el-table-column label="日期" width="70" type="selection" align="center"> </el-table-column>
        <el-table-column prop="id" label="编号" width="100" align="center"> </el-table-column>
        <el-table-column prop="name" label="品牌名称" width="300" align="center"> </el-table-column>
        <el-table-column prop="firstLetter" label="品牌首字母" width="100" align="center"> </el-table-column>
        <el-table-column prop="sort" label="排序" width="100" align="center"> </el-table-column>
        <el-table-column prop="id" label="品牌制造商" width="100" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.factoryStatus" :active-value="1" :inactive-value="0" active-color="#409eff" inactive-color="#dcdfe6"> </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="是否显示" width="100" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.showStatus" :active-value="1" :inactive-value="0" active-color="#409eff" inactive-color="#dcdfe6"> </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="相关" width="200" align="center">
          <template slot-scope="scope">
            <span>
              商品： <span class="count">{{ scope.row.productCount }}</span>
            </span>
            <span>
              评价：<span class="count">{{ scope.row.productCommentCount }}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleBrandEditJump(scope.row.id)">编辑</el-button>
            <el-button size="mini" type="danger" @click="open(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="mt-4 d-flex justify-content-between">
        <el-badge :value="prompt ? '倒序' : '正序'" class="item">
          <el-button type="primary" @click="handleSortList">排序</el-button>
        </el-badge>
        <div class="block">
          <el-pagination
            :background="true"
            @size-change="getBrandList"
            @current-change="getBrandList"
            :current-page.sync="query.pageNum"
            :page-sizes="[5, 10, 15]"
            :page-size.sync="query.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { fetchBrandList } from '@/api/api'
import { removeProductItem } from '@/utils/utils'
export default {
  name: 'RegulateBrand',
  data() {
    return {
      brandFormInfo: {
        keyword: '',
      },
      brandList: [],
      total: 0,
      query: {
        pageNum: 1,
        pageSize: 5,
      },
      DialogEditInfo: '',
      prompt: true,
    }
  },
  methods: {
    async getBrandList() {
      let res = await fetchBrandList(this.query)
      let { list, total } = res.data
      this.brandList = list
      this.total = total
    },
    open(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          removeProductItem(this.brandList, id)
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    handleBrandEditJump(id) {
      this.$router.push({ path: '/pms/updateBrand', query: { id } })
    },
    async handleBrandSearch() {
      let res = await fetchBrandList({ keyword: this.brandFormInfo.keyword })
      this.brandList = res.data.list
    },
    // 排序列表
    handleSortList() {
      this.prompt = !this.prompt
      if (this.prompt) {
        this.brandList.sort(({ sort: a }, { sort: b }) => b - a)
      } else {
        this.brandList.sort(({ sort: a }, { sort: b }) => a - b)
      }
    },
  },
  created() {
    this.getBrandList()
  },
}
</script>
<style lang="scss">
.dataList {
  padding: 18px 20px;
}
.count {
  color: #409eff;
  font-size: 12px;
}
</style>
